<template>
    <div class="bank-card">
        <form v-if="show" id="form" >
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" v-model="realname" type="text" required readonly>
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" v-model="id_card" type="text" required readonly>
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" v-model="bank_card" type="text" required v-bind="{readonly: lock}" placeholder="请输入16或19位银行卡号">
                    </div>
                </div>

            </div>
            <div v-if="!lock" class="cert-action">
                <a href="javascript:;" @click="handleSubmit" class="weui-btn weui-btn_primary">提交</a>
            </div>
        </form>
        <div  v-if="lock" class="bottom-bar">
            <a href="javascript: void(0)" @click="handleDel" class="bottom-bar-action bar-left" style="background-color: rgb(255, 87, 34); color: rgb(255, 255, 255);">
                删除
            </a> 
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            realname: null,
            id_card: null,
            bank_card: null,
            show: false,
            lock: false
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        handleSubmit() {
            axios.post('/member/bankCard', {
                bank_card: this.bank_card,
            }).then(res => {
                const data = res.data
                if (data.status === 'success') {
                    weui.toast(data.message, {
                        duration: 1000,
                        callback: function() {
                            window.location.href = '/member'
                        }
                    });
                } else {
                    weui.topTips(data.message)
                }
            })
        },
        getUserInfo() {
            axios.get('/member/userInfo').then(res => {
                const data = res.data.data
                if (data.check !== 2) {
                    weui.alert('请完成实名认证', function(){ 
                        window.location.href = '/member/personalCert';
                    });
                    return false;
                }
                this.show = true
                this.realname = data.realname
                this.id_card = data.idcard
                if (data.bank_card) {
                    this.lock = true
                    this.bank_card = data.bank_card
                }

            }).catch(err => {
                console.log(err)
            })
        },
        handleDel() {
            axios.delete('/member/bankCard').then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
            }) 
        }
    }
}
</script>
